html,
body,
body>form {
    height: 100%;
}

body {
    font: 22px/1.5 STHeiTi, \9ED1\4F53, helvetica Regular, Heiti SC;
    color: #666;
}

a {
    text-decoration: none;
}

a,
input,
li,
span,
div {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

input:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

input {
    -webkit-appearance: none;
}

img.auto {
    max-width: 100%;
}

ul li {
    list-style: none;
}

.bold {
    font-weight: bold;
}

.green-bg {
    background-color: #62cfc6;
}

.gray-bg {
    background-color: #f1f5f7;
}

.btn-gray,
.btn-red {
    border: 2px solid #ffb0b5;
    border-radius: 6px;
    background-color: #e85e66;
    color: #fff;
    font-size: 18px;
    display: block;
    text-align: center;
    padding: 4px;
    background-clip: padding-box;
}




.page {
    /* padding: 0 5%; */
    height: auto !important;
    min-height: 100%;

    position: relative;
}

.page .page-bot {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 20px;
}

.page-bot .btn-red,
.page-bot .btn-gray {
    margin: 0 5%;
    display: block;
}

.row {
    /* margin-bottom: 30px; */
}

.row-hide {
    display: none;
}

.row .label {
    display: block;
    font-size: 20px;
    color: #666;
    padding-bottom: 8px;
}

.row .label .tips {
    font-size: 12px;
    color: #999;
    display: block;
}

.ruler {
    border: 2px solid #ffa657;
    height: 70px;
    overflow: hidden;
    position: relative;
    /* width: 290px; */
}

.ruler:after {
    right: 0;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
}

.ruler .main {
    width: 3000px;
    position: relative;
    left: 0;
}

.ruler .main ul {
    overflow: hidden;
    -webkit-transform: translateX(51px);
}

.ruler-weight .main ul {
    overflow: hidden;
    -webkit-transform: translateX(45px);
}

.ruler-age .main ul {
    overflow: hidden;
    -webkit-transform: translateX(117px);
}

.ruler li {
    float: left;
    width: 104px;
    height: 60px;
    background: url(../images/ruler_height.png) left top no-repeat;
    background-size: 94px;
    padding-top: 30px;
    text-align: right;
    color: black;
    padding-left: 0;
}

.ruler li .num {
    display: inline-block;
    position: relative;
    margin-right: -6px;
}

.ruler .arrow {
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 8px solid #ffa657;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -8px;
}

.ruler-age {
    border-color: #6fc481;
}

.ruler-age .arrow {
    border-top-color: #6fc481;
}

.ruler-weight {
    border-color: lightgray;
}

.ruler-weight .arrow {
    border-top-color: rgb(34, 131, 226);
}

.ruler-weight li {
    background: url(../images/ruler_weight.png) left top no-repeat;
    background-size: 100px auto;
    color: #b5d0e1;
}

.ruler-age li {
    background: none;
    color: #9bd5a7;
    width: 50px;
    position: relative;
    margin-right: 0;
    text-align: center;
}

.ruler-age li:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 2px;
    top: 0;
    left: 27px;
    background-color: #6fc481;
}

.ruler-weight li:last-child {
    background-size: 103px auto;
}

.ruler-weight .main ul {
    position: relative;
}

.row .radio li,
.icon-radio {
    padding-left: 20px;
    /*    background:url(../img/icon/icon_radio.png) left 5px no-repeat;*/
    background-size: 16px 48px;
    font-size: 18px;
}

.row .radio li.selected,
.radio-selected {
    /*   background:url(../img/icon/icon_radio.png) left -27px no-repeat;*/
    background-size: 16px 48px;
}

.row .age-num {
    color: #6fc481;
}

.row .height-num {
    color: #ffa657;
}

.row .width-num {
    color: #57c0ff;
}

.row .letter {
    font-family: Century Gothic;
    font-size: 20px;
    margin-left: 5px;
}

.row .tag span {
    font-size: 18px;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    padding: 4px 2%;
    display: inline-block;
    margin: 10px 6% 10px 0;
    width: 42%;
    text-align: center;
    min-width: 126px;
}

.row .tag span:nth-child(even) {
    margin-right: 0;
}

@media screen and (max-width:330px) {
    .result-main .cost-list .dd-head .num-box {
        font-size: 22px;
    }

    .row .tag span {
        font-size: 15px;
        min-width: 90px;
    }

    .result-main .process li.item .li-main .row label {
        font-size: 16px !important;
    }

    .result-main .process li.item {
        padding: 12px 10px !important;
    }
}

@media screen and (max-height:500px) {
    .row {
        margin-bottom: 20px;
    }

    .row:last-child {
        margin-bottom: 0;

    }

    .ruler {
        height: 60px;
    }

    .row .label {
        padding-bottom: 0;
    }

    .row .label,
    .row .letter {
        font-size: 16px;
    }
}

.row .tag span.active {
    background-color: #62cfc6;
    border: 1px solid #62cfc6;
    color: #fff;
    background-clip: padding-box;
}

.row .other-input {
    border-bottom: 1px solid #CCC;
    padding: 0 5px;
    display: none;
}

::-webkit-input-placeholder {
    color: #e7e7e7;
}

.row .other-input input {
    border: 0;
    width: 100%;
    height: 26px;
    line-height: 26px;
    padding: 4px 0;
    font-size: 16px;
    font-family: \9ED1\4F53;
    color: #666;
}

.row .tips-info {
    background-color: #f2f2f2;
    border-radius: 5px;
    color: #a9a19b;
    font-size: 14px;
    padding: 10px;
    margin-top: 10px;
    display: none;

}

.row .tips-info em {
    color: #62cfc6;
    font-style: normal;
}

div[data-page="profile10"] {
    position: absolute;
    width: 90%;
    min-height: 100%;
    z-index: 12;
    opacity: 1;

}

div.hide-page {
    -webkit-transition: opacity 3s;
    opacity: 0;
}

.title_font {
    color: rgb(51, 51, 51);
    font-size: 0.34rem;
}

.cont {
    position: relative;
    text-align: center;
}

.cont1 {
    padding: 1.39rem 0 0.47rem 0;
}

.cont2 {
    background-color: white;
}

.cont3 {
    padding: 1.24rem 0 0.34rem 0;
}

.cont3_new {
    padding: 0.95rem 0 0.44rem 0;
}

.btn_weight {
    position: relative;
    width: 3.49rem;
    height: 0.93rem;
}

.btn_weight {
    margin: 0 auto;
    width: 3.49rem;
    height: 0.93rem;
    background-color: white;
    border-radius: 0.5rem;
    text-align: center;
    overflow: hidden;
}

.btn_weight div {
    display: inline-block;
    font-size: 0.24rem;
    line-height: 0.9rem;
    width: 48%;
    height: 100%;
}

.btn_active {
    background-color: rgb(34, 131, 226);
    color: white;
    border-radius: 0.5rem;
}

.btn_next {
    background: rgb(34, 131, 226);
    width: 80%;
    margin: 0 auto;
    height: 0.9rem;
    color: white;
    border-radius: .2rem;
    font-size: 0.3rem;
    border: 0.01rem solid rgb(255, 255, 255, 0)
}